
// sass variables
$danger: var(--danger)
$dark: var(--dark)
$info: var(--info)
$link: var(--link)
$primary: var(--primary)
$success: var(--success)
$warning: var(--warning)
$white: var(--white)


// declared base css variables
#{":root"}
  --danger: rgb(230, 41, 100)
  --dark: rgb(40, 50, 82)
  --info: rgb(3, 152, 226)
  --link: rgb(72, 95, 199)
  --primary: rgb(65, 185, 131)
  --success: rgb(6, 214, 158)
  --warning: rgb(250, 173, 66)
  --white: rgb(255, 255, 255)


// derived, generated css variables
#{":root"}
  --danger--color-invert: rgb(255, 255, 255)
  --danger--dark-color: rgb(210, 25, 83)
  --danger--light-color: rgb(253, 237, 242)

  --dark--800--lighten: rgb(53, 67, 109)
  --dark--color-invert: rgb(255, 255, 255)

  --info--color-invert: rgb(255, 255, 255)
  --info--dark-color: rgb(3, 135, 201)
  --info--light-color: rgb(235, 248, 255)

  --link--color-invert: rgb(255, 255, 255)
  --link--dark-color: rgb(56, 79, 184)
  --link--light-color: rgb(239, 241, 250)

  --primary--color-invert: rgb(255, 255, 255)
  --primary--dark-color: rgb(45, 128, 91)
  --primary--light-color: rgb(240, 250, 245)

  --success--color-invert: rgb(255, 255, 255)
  --success--dark-color: rgb(4, 144, 106)
  --success--light-color: rgb(235, 254, 249)

  --warning--color-invert: rgba(0, 0, 0, 0.7)
  --warning--dark-color: rgb(144, 85, 4)
  --warning--light-color: rgb(255, 246, 235)

  --white--800--lighten: rgb(255, 255, 255)

